<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="查看FeedBack" v-model="visible" append-to-body width="1000px" @close="handleClose">
    <el-tabs v-model="activeName" class="mb-3">
      <el-tab-pane label="评价分布" name="count">
        <div class="grid grid-cols-5 border border-b-0">
          <div class="border-b p-2 bg-blue-50 font-bold"></div>
          <div class="border-b p-2 bg-blue-50 font-bold">30天</div>
          <div class="border-b p-2 bg-blue-50 font-bold">90天</div>
          <div class="border-b p-2 bg-blue-50 font-bold">12个月</div>
          <div class="border-b p-2 bg-blue-50 font-bold">全部</div>

          <div class="border-b p-2">Positive</div>
          <div class="border-b p-2" v-for="(d, i) in form.count.positive_info" :key="i">{{d.per}}</div>
          <div class="border-b p-2">Neutral</div>
          <div class="border-b p-2" v-for="(d, i) in form.count.neutral_info" :key="i">{{d.per}}</div>
          <div class="border-b p-2">Negative</div>
          <div class="border-b p-2" v-for="(d, i) in form.count.neutral_info" :key="i">{{d.per}}</div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="评价明细" name="list">
        <div class="flex mb-2">
          <VExport name="eBay_feedback" :tableRef="tableRef" task />
        </div>
        <vxe-table ref="tableRef" :data="form.list" :max-height="560">
          <vxe-column title="星级" field="feedback_rating_star" width="120"></vxe-column>
          <vxe-column title="评价内容" field="comment_text" minWidth="200"></vxe-column>
          <vxe-column title="买家" field="commenting_user" width="160"></vxe-column>
          <vxe-column title="时间" field="comment_time" width="160"></vxe-column>
        </vxe-table>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script setup>
import api from './api'
const load = ref(false)
const visible = ref(false)
const tableRef = ref()
const activeName = ref('')
const form = ref({})

const emit = defineEmits(['close'])

// 打开弹窗
const open = async (shop_id) => {
  activeName.value = 'count'
  form.value = {
    count: {
      positive_info: {},
      neutral_info: {},
      negative_info: {},
    },
    list: [],
  }
  if (!load.value) {
    load.value = true
    await 1
  }
  try {
    api.feedbackCount({ shop_id }).then(res => {
      if(!res.data) return
      form.value.count = res.data
    })
    api.feedbackList({ shop_id }).then(res => {
      form.value.list = res.data.list
    })
    visible.value = true
  } catch (error) {
    console.log('error', error)
  }
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>